<template>
  <div class="bg-purple">
    <div v-for="(item, index) in detailsList" :key="index">
      <h6 class="hLabel">{{ item.subjectInformation }}</h6>
      <div class="subjectInformationLeft">
        <div class="subjectInformationTitle">
          <div class="title">
            <div> 入驻类型 </div>
            <div> 营业执照名称 </div>
            <div> 营业执照有效期 </div>
            <div> 营业执照 </div>
            <div> 办公环境 </div>
          </div>
          <div class="content">
            <div> {{ item.entryType }} </div>
            <div> {{ item.businessLicenseName }} </div>
            <div>{{ item.businessLicenseDateRange }} </div>
            <div class="view" @click="onPreview()">
              查看预览

              <el-image-viewer
                v-if="showViewer"
                :on-close="closeViewer"
                :url-list="srcList"
              />
            </div>
            <div class="view" @click="onPreview()">
              查看预览

              <el-image-viewer
                v-if="showViewer"
                :on-close="closeViewer"
                :url-list="srcList"
              />
            </div>
          </div>
        </div>
        <div class="subjectInformationContent">
          <div class="title">
            <div> 商户简称 </div>
            <div> 营业执照编号</div>
            <div> 门头照片 </div>
            <div> 所在行业 </div>
          </div>
          <div class="content">
            <div> {{ item.MerchantName }} </div>
            <div> {{ item.businessLicenseNumber }} </div>
            <div class="view" @click="onPreview()">
              查看预览

              <el-image-viewer
                v-if="showViewer"
                :on-close="closeViewer"
                :url-list="srcList"
              />
            </div>
            <div> {{ item.Industry }} </div>
          </div>
        </div>
      </div>
      <h6 class="hLabel">{{ item.head }}</h6>
      <div class="subjectInformationLeft">
        <div class="subjectInformationTitle">
          <div class="title">
            <div> 姓名 </div>
            <div> 证件地址 </div>
            <div> 证件正面 </div>
          </div>
          <div class="content">
            <div> {{ item.legalPersonName }} </div>
            <div> {{ item.IDCardAddress }} </div>

            <div class="view" @click="onPreview()">
              查看预览

              <el-image-viewer
                v-if="showViewer"
                :on-close="closeViewer"
                :url-list="srcList"
              />
            </div>
          </div>
        </div>
        <div class="subjectInformationContent">
          <div class="title">
            <div> 证件号 </div>
            <div> 证件反面</div>
          </div>
          <div class="content">
            <div> {{ item.IDCard }} </div>

            <div class="view" @click="onPreview()">
              查看预览

              <el-image-viewer
                v-if="showViewer"
                :on-close="closeViewer"
                :url-list="srcList"
              />
            </div>
          </div>
        </div>
      </div>
      <h6 class="hLabel">{{ item.operator }}</h6>
      <div class="subjectInformationLeft">
        <div class="subjectInformationTitle">
          <div class="title">
            <div> 手机号码 </div>
          </div>
          <div class="content">
            <div> {{ item.phoneNumber }} </div>
          </div>
        </div>
        <div class="subjectInformationContent">
          <div class="title">
            <div> 电子邮箱 </div>
          </div>
          <div class="content">
            <div> {{ item.EMail }} </div>
          </div>
        </div>
      </div>
      <h6 class="hLabel">{{ item.bankCard }}</h6>
      <div class="subjectInformationLeft">
        <div class="subjectInformationTitle">
          <div class="title">
            <div> 开户城市 </div>
            <div> 开户名称 </div>
          </div>
          <div class="content">
            <div> {{ item.openAccountCity }} </div>
            <div> {{ item.openAccountName }} </div>
          </div>
        </div>
        <div class="subjectInformationContent">
          <div class="title">
            <div> 抽佣比例 </div>
            <div> 银行账号</div>
          </div>
          <div class="content">
            <div> {{ item.commissionRatio }} </div>
            <div> {{ item.bankAccount }} </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer';

  export default {
    name: 'incomingDetails',
    components: {
      ElImageViewer
    },
    props: {
      detailsList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        showViewer: false, // 显示查看器
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      };
    },
    methods: {
      // 点击按钮预览图片
      onPreview() {
        this.showViewer = true;
      },
      // 关闭查看器
      closeViewer() {
        this.showViewer = false;
      }
    }
  };
</script>
<style lang="less" scoped>
  .bg-purple {
    margin-top: 20px;
    // h标签
    .hLabel {
      margin: 10px 0 20px;
      font-weight: 700;
      &::before {
        content: '';
        display: inline-block;
        vertical-align: top;

        margin-right: 5px;
        height: 23px;
        width: 6px;
        background-color: #1e6ceb;
      }
    }

    .subjectInformationLeft {
      display: flex;
      align-items: center;
      justify-content: center;

      .subjectInformationTitle {
        width: 792px;

        //   background-color: aqua;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-left: 150px;
        .title {
          margin-right: 46px;
          text-align: right;
          width: 100px;
          div {
            color: #666;
            margin: 5px 0 5px;
          }
        }
        .content {
          div {
            color: #000;
            margin: 5px 0 5px;
          }
          .view {
            color: #1e6ceb;
            cursor: pointer;
          }
        }
      }
      .subjectInformationContent {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-right: 100px;
        .title {
          margin-right: 46px;
          text-align: right;
          width: 100px;
          div {
            color: #666;
            margin: 5px 0 5px;
          }
        }
        .content {
          div {
            color: #000;
            margin: 5px 0 5px;
          }
          .view {
            color: #1e6ceb;
            cursor: pointer;
          }
        }
        width: 792px;

        //   background-color: aquamarine;
      }
    }
  }
</style>
